<template>
    <div class="detail">
      <div class="img">
        <van-image lazy-load :src="film.poster" fit="cover" position="center" class="poster" />
      </div>
      <div class="film-detail">
        <div>{{ film.name }}</div>
        <div>{{ film.category }}</div>
        <div>{{ parsePremiereAt(film.premiereAt) }}上映</div>
        <div>{{ film.nation }} | {{ film.runtime }} 分钟</div>
        <div>
          {{ film.synopsis }}
        </div>
      </div>
  
      <h2 style="font-size: 16px; color: #666; margin: 10px">演职人员</h2>
      <swiper :slides-per-view="4" :space-between="50" class="swiper-box">
        <swiper-slide v-for="(item, index) in film.actors" :key="index" class="swiper-slide">
          <div>
            <van-image width="95px" height="95px" fit="cover" position="center" :src="item.avatarAddress" />
            <div style="
                font-size: 8px;
                width: 95px;
                text-align: center;
                margin-top: 12px;
              ">
              {{ item.name }}
            </div>
            <div style="
                font-size: 8px;
                width: 95px;
                text-align: center;
                margin-top: 5px;
              ">
              {{ item.role }}
            </div>
          </div>
        </swiper-slide>
      </swiper>
  
      <h2 style="font-size: 16px;color: #666;margin: 10px;">剧照</h2>
      <swiper :slides-per-view="2" :space-between="50" class="swiper-box">
        <swiper-slide v-for="(item, index) in film.photos" :key="index" class="swiper-slide" @click="showPreview(index)">
          <van-image width="195px" height="120px" fit="cover" position="center" :src="item" />
        </swiper-slide>
      </swiper>
    </div>
  </template>

<script setup lang='ts'>
import { ref } from "vue";
import { moiveDetailData } from "../api/api";
import { FilmType } from "../types/index";
import {useRoute } from "vue-router";
import moment from "moment";
import $bus from "../config/eventBus";

import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";

import { ImagePreview } from 'vant';
import 'vant/es/image-preview/style';

let film = ref<FilmType>({
    poster: "",
    name: "",
    category: "",
    premiereAt: "",
    nation: "",
    runtime: "",
    synopsis: "",
});

// 可以使用 route 来获取 参数值
const route = useRoute();
console.log(route.params.id);

$bus.emit("tabBarHide", false);

(async () => {
    // 这里需要注意：路由传参可能是一个数组，所以，我们需要进行转换
    let res = await moiveDetailData(route.params.id as string);
  console.log(res);
  film.value = res.data.film;
})();

// 格式化时间
const parsePremiereAt = (value: string) => {
  return moment(parseInt(value) * 1000).format("YYYY年MM月DD日");
};
// 打开预览
const showPreview = (index: number) => {
  ImagePreview({
    images: film.value.photos as string[],
    startPosition: index,
    closeable: true,
    showIndicators: true
  })
}

</script>

<style scoped lang='scss'>
.detail {
  padding-bottom: 80px;

  .poster {
    width: 100%;
    height: 250px;
  }

  .swiper-box {
    margin: 0 10px;
  }
}
</style>